<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">
        <select name="" id="one">
            <option value="" id="">请选择省份</option>
        </select>
        <select name="" id="two">
            <option value="" id="">请选择市</option>
        </select>
        <select name="" id="three">
            <option value="">请选择县</option>
        </select>
    </div>
    <script>
        let one = document.querySelector('#one');
        // let two = document.querySelectorAll('option');
        let select = document.querySelector('select');
        let selectTwo = document.querySelector('#two');
        let selectThree = document.querySelector('#three');
        let newData = {};
        fetch("./city.json", {
            // method: "GET", // type请求类型
            // headers: { //设置请求头，表单编码格式传输数据(参数)
            //     "Content-Type": "application/x-www-form-urlencoded"
            // }
        }).then(function (response) {
            return response.json(); //转j son格式返回值，解析为可读数据
        }).then(function (data) {
            // console.log(data); //获取请求成功的结果
            for (let i in data) {
                let op = document.createElement('option')
                op.innerHTML = i;
                select.appendChild(op);
            }
            one.addEventListener('change', function (e) {
                let b = e.target.value;
                selectTwo.innerHTML = '';
                let w = document.createElement('option');
                w.innerHTML = '请选择市'
                selectTwo.appendChild(w);
                selectThree.innerHTML = '';
                let w1 = document.createElement('option');
                w1.innerHTML = '请选择县'
                selectThree.appendChild(w1);

                for (let i in data[b]) {
                    let op = document.createElement('option');
                    // op.setAttribute('selected','selected');
                    op.innerHTML = i;
                    selectTwo.appendChild(op);
                }
                newData = data[b];
            });

            selectTwo.addEventListener('change', function (e) {
                let b = e.target.value;
                selectThree.innerHTML = '';
                let w2 = document.createElement('option');
                w2.innerHTML = '请选择县'
                selectThree.appendChild(w2);
                // console.log(b);
                // console.log(newData[b]);
                for (let i in newData[b]) {
                    // console.log(newData[b][i]);
                        let op = document.createElement('option')
                        op.innerHTML = newData[b][i];
                        selectThree.appendChild(op);
                }
            });
        }).catch(function (error) {
            console.log(error); //获取请求失败的结果
        });
    </script>
</body>

</html>